<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>活动统计</title>
</head>
<link href="<%=path %>/hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/style.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
<style>
  .col-sm-1{
        padding-right: 0;
    }
  body{
		font-size:12px;
		font-family:"宋体";
	}
  .label1{
  		font-size:15px;
  		margin-left:10px;
  		margin-top:15px;
  }
  .label2{
  		font-size:12px;
  		margin:10px;
  		margin-top:5px;
  }
  .row{
  		background-color:#fff;
  		 margin:20px;  
  }
  .click-count{
  		font-size:16px;
  		color:#1ab394;
  }
  .chart-line{
  		margin-top:-10px;
  		height:400px;
  		width:100%;
  }
  #datepicker{
		margin-left:10px;
	}
	.radio-primary input[type="radio"] + label::after {background-color: #1ab394;}
	.radio-primary input[type="radio"]:checked + label::after {background-color: #1ab394;}
	.radio-primary input[type="radio"]:checked + label::before {border-color: #1ab394;}
	.yellow_circle{
           width: 120px;
           height: 120px;
           background: #fee087;
           border-radius: 50%;
           padding-top: 30px;
           margin: 4px;            
       }

       .yellow_circle p{
           color: #333;
           text-align: center;
       }

       .yellow_circle p.people{
           color: #8f721c;
           font-size: 20px;
       }

       .yellow_circle_border{            
           width:130px;
           height:130px;
           border:1px solid #fee087;
           border-radius: 50%;
           margin-top:50px;
       }
       .s_col_sm_2{
       	   width:150px;
       	   height:150px;
       	   margin-left:30px;
       }
       .k_blue{
        	 border:1px solid #c9cff5;
        }
        
        .k_blue .yellow_circle{
        	background: #c9cff5;
        }
      .mapp{
      		height:500px;
      		width:700px;
      }
       .mapView{ 
      float:left;
      cursor:pointer;
      }
      .mapView:hover{ 
      color:red;
      }
      
      .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
       
      
</style>
<body class="gray-bg">
	<div class="from-group">
		<div class="row" style="background-color:#f3f3f4;height:15px">
			<div class="col-sm-12" style="height:15px;">
                <h4><a href="aemInfoPage.html" onclick="javascript:location.replace(this.href);event.returnValue=false;">全员营销活动></a>
                <a href="<%=path%>/view/ui/aemInfoAddPage"><span id="liename"></span></a>>活动统计</h4>
        	</div>
		</div>
	</div>
	<div class="from-group">
		<div class="row">
				<div class="col-sm-12" style="height:30px;margin:10px">
					<span id="liename1" style="font-weight:bold;font-size:16px;"></span><label style="font-weight:bold;font-size:16px;">活动统计</label>
				</div>
				<div class="col-sm-12">
	           		<div class="col-sm-9" style="padding: 0;height: 40px;" id="data_5">
		                <div class="input-daterange col-sm-2 date input-group" id="datepicker" style="float:left;">
							<input type="text" class="input-sm col-sm-1 form-control" name="start" onchange="startTimeChange()"  id="startDate" style="min-width:100px;">
			                <span class="input-group-addon" style="height: 24px;">到</span>
			                <input type="text" class="input-sm col-sm-1 form-control" name="end"  onchange="endTimeChange()"  id="endDate" style="min-width:100px;">		                
		           		</div>
		            </div>
		           	<div class="col-sm-3 text-right">
						<button id="search" onclick="active_dataTableReload()" class="btn btn-primary" type="button">搜索</button>
						<shiro:hasPermission name="member_report:export_pdf">
						<button onclick="materialName()" class="btn btn-primary" type="button">查看H5素材活动统计</button>
						</shiro:hasPermission>
					</div>   
           		</div>
           	<div style="height: 40px;"></div>
				<div class="couton" style="padding: 10px,0,0,0">
					<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;">数据概览</button>      
					<a href="#"><span id="activestatic" class="badge">?</span></a>
 				</div>
				<div class="row" style="background-color: white;">
					<div class="col-sm-1"></div>
					<div class="col-sm-2 text-center" >
						<div class="yellow_circle_border"><div class="yellow_circle"><p>访问次数</p><p class="people"><span>0</span><br/></p></div></div>
					</div>
					<div class="col-sm-2 text-center" >
						<div class="yellow_circle_border k_blue"><div class="yellow_circle"><p>访问人数</p><p class="people"><span>0</span><br/></p></div></div>
					</div>
					<div class="col-sm-2 text-center" >
						<div class="yellow_circle_border"><div class="yellow_circle"><p>分享用户</p><p class="people"><span>0</span><br/></p></div></div>
					</div>
					<div class="col-sm-2 text-center" >
						<div class="yellow_circle_border k_blue"><div class="yellow_circle"><p>员工参与人数</p><p class="people"><span>0</span><br/></p></div></div>
					</div>
					<div class="col-sm-2 text-center">
						<div class="yellow_circle_border"><div class="yellow_circle"><p>已发放积分数</p><p class="people"><span>0</span><br/></p></div></div>
					</div>
				</div>
		</div>
	</div>
	<div class="from-group">
		 <div class="tab-content">
			<div class="couton" style="padding: 10px,0,0,0;margin:20px;margin-bottom:0px">
				<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;">部门排行TOP10</button>      
			</div>
			<!--部门排行  -->
			<!-- <div style="background-color:white;margin:10px;background-color: white"></div> -->
			 <div class="row" style="margin-top:0px;">
				<div class="col-sm-12" style="margin-top:10px;">
					<table id="departmentMyTable" class="table table-bordered table-striped table-hover" style="font-size:12px;">
						<thead>
							<tr>
								<th>排名</th>
								<th>部门名称</th>
				                <th>活动点击人数</th>
				                <th>活动分享人数</th>
				                <th>平均新增积分</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		     <!--地图  -->
		     	<div class="couton" style="padding: 10px,0,0,0;margin:20px;margin-bottom:0px">
					<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;">用户地区分布</button>      
				</div>
		     	<div class="row" style="margin-top:0px;">
		     	<span class="mapView" data-id="access">全国视图</span>
			     	<div class="col-sm-7 mapp"  id="accessCount" style="margin-top:10px;">
			     	
			     	</div>
			     	<div class="col-sm-5" style="margin-top:10px;">
			     		<table id="mapTable" class="table table-bordered table-striped table-hover" style="font-size:12px;">
			     			<tr>
			     				<th>地区</th>
			     				<th>访问用户数</th>
			     				<th>分享用户数</th>
			     				<th>传播占比</th>
			     			</tr>
			     			<tbody class="access-table"></tbody>
			     		</table>
			     	</div>
		     	</div>
	     </div>
	</div>
	<!-- 数据趋势 -->
	<div class="from-group">
	  		<div class="couton" style="padding: 10px,0,0,0;margin:20px;margin-bottom:0px">
				<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;">数据趋势</button>      
			</div>
		 <div class="row" style="margin-top:0px;">
			<div id="activeLine" style="height: 400px;"></div>
		</div>
	</div>
	
	<!--纤细数据列表  -->
	<div  class="from-group">
		<div class="couton" style="padding: 10px,0,0,0;margin:20px;margin-bottom:0px">
			<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;">详细数据</button>       
			<shiro:hasPermission name="scrm_sms_validate_employee">
			<a id="export" href="javascript:void(0)" style="float:right">
					<button class="btn btn-primary" type="button">导出数据</button>
			</a>
			 </shiro:hasPermission>
		</div>
		<div class="row" style="margin-top:0px;">
			<div class="col-sm-12" style="margin-top:10px;">
			<table id="avtiveTable" class="table table-bordered table-striped table-hover" style="font-size:12px;">
				<thead>
					<tr>
						<th>日期</th>
						<th>活动点击次数（pv）</th>
		                <th>活动点击人数（uv）</th>
		                <th>活动分享人数</th>
		                <th>分享回流率</th>
					</tr>
				</thead>
			</table>
			</div>
		</div>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="<%=path%>/js/system/province-city-area-data.js"></script>

<script type="text/javascript">
var path = "<%=path%>";
//限制可选开始时间
var limitStartTime;
//限制可选结束时间
var limitEndTime;
var cityCode = null;
var id = getUrlParam("id");
var name = decodeURI(getUrlParam("name"));
var material = getUrlParam("createTime");
var searchData = new Object();
var AcDataTable;
var myDataTable
$(function(){
	$("#liename").text(name);
	$("#liename1").text(name);
	$(":checkbox").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	$(".input-daterange").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
	
	initDate();
	 $('#startDate').datepicker({
		todayBtn : "linked",
		autoclose : true,
		todayHighlight : true,
		endDate : new Date(limitEndTime)
	}).on('changeDate',function(e){
		var startTime = e.date;
		$('#endDate').datepicker('setStartDate',startTime);
	});
	//结束时间：
	$('#endDate').datepicker({
		todayBtn : "linked",
		autoclose : true,
		todayHighlight : true,
		endDate : new Date(limitEndTime)
	}).on('changeDate',function(e){
		var endTime = e.date;
		$('#startDate').datepicker('setEndDate',endTime);
	}); 
	//初始化页面元素
	initHtmlContent();
	InitMapHtml();
	init();
});


//时间控制
function startTimeChange(){
	 var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();		   
	 if(CompareDate(startTime,endTime)){
		 $('#endDate').val(startTime);
	 }
}
function endTimeChange(){
   	 var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();		   
	 if(CompareDate(startTime,endTime)){
		 $('#endDate').val(endTime);
	 }
}
function CompareDate(d1,d2)
{
  return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/"))));
}

function InitMapHtml(){
	$(".mapView").html("全国视图")
	cityCode=null;
	var value = document.body.clientWidth-20;
	$("#accessCount")[0].style.width=(value)/14*7+"px";
	chinaMap();
}
function getUrlParam(key){
	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}


//时间格式化为yyyy-mm-dd hh:mm
function timeFormatLong(date){
	var y = date.getFullYear();    
	var mon = date.getMonth()+1;//获取当前月份的日期   
	var d = date.getDate(); 	
	var h=date.getHours();//小时 
    var m=date.getMinutes(); //分 
    return  timeMakeLong(y)+"-"+timeMakeLong(mon)+"-"+timeMakeLong(d)+" "+timeMakeLong(h)+":"+timeMakeLong(m);
}
//时间格式化为yyyy-mm-dd
function timeFormat(date){
	var y = date.getFullYear();    
	var mon = date.getMonth()+1;//获取当前月份的日期   
	var d = date.getDate(); 
	return  timeMakeLong(y)+"-"+timeMakeLong(mon)+"-"+timeMakeLong(d);
}

//时间补0
function timeMakeLong(data){
	if((data+"").length==1){
		return "0"+data;
	}
	return data;
}

/* 初始化页面排行 */
function init() {
    myDataTable = dataTable();
  /*  var MapDataTable = mapDataTable(); */
   	AcDataTable = activeDataTable();
   	
}
//初始化页面的元素
function initHtmlContent(){
	chinaMap();
	func_sumAll()
	func_memberLine();
}

function active_dataTableReload() {
	AcDataTable.ajax.reload();
	myDataTable.ajax.reload();
	chinaMap();
	func_sumAll();
}
//初始化时间控件
function initDate(){
	var initDateUrl = path+"/activeReport/findActiveByDto";
	var material;
	//查询素材的限制时间信息
	$.ajax({
		type : "post",
		url : initDateUrl,
		async : false,
		data : {
			"id" : id
		},
    	success : function(data){
    	  if(data.status="200"){
    		  material=data.data;
    	  }
    	}
    });
	//限制时间控件的选择时间
	if(material!=null){
		var startTime = material.startTime;
		var endTime = material.endTime;
		var s1 = endTime.substring(0,10)
		var nowDate = new Date();
		var year= nowDate.getFullYear();
		var month = nowDate.getMonth()+1;
		var today = nowDate.getDate();
		var hours = nowDate.getHours();
		var minutes = nowDate.getMinutes();
		var seconds = nowDate.getSeconds();
		
		if(month >= 1 && month <=9){
			month = "0" + month;
		}
		if(today >= 1 && today <=9){
			today = "0" + today;
		}
		var s2 = year + "-" + month + "-" + today + " " + hours + ":" +minutes + ":" +seconds;
		if(s2 < endTime){
			var weekTime = new Date(new Date().getTime() - 7 * 60 * 60 * 1000 * 24);
			limitEndTime = new Date(new Date().getTime() - 1 * 60 * 60 * 1000 * 24);
			var staa = new Date( new Date(startTime).getTime()); 
			if(staa>weekTime){
				limitStartTime = startTime;
			}else{
				limitStartTime = weekTime;
			}
		}else{
			limitStartTime = startTime;
			if((new Date().getTime() - new Date(endTime).getTime()) >1 * 60 * 60 * 1000 * 24){
				limitEndTime = new Date(new Date(endTime).getTime());
			}else{
				limitEndTime = new Date(new Date().getTime() - 1 * 60 * 60 * 1000 * 24);
			}
			/* limitEndTime = endTime; */
		}
		var starDate = new Date(limitStartTime);
		var endDate = new Date(limitEndTime); 	
		startDate = timeFormat(starDate);
		$("#startDate").val(startDate);
		endDate =  timeFormat(endDate);
		$("#endDate").val(endDate);
		$('#startDate').datepicker('setStartDate',new Date(startTime));
		$('#startDate').datepicker('setEndDate',new Date(limitEndTime));
		$('#endDate').datepicker('setStartDate',new Date(limitStartTime));
		$('#endDate').datepicker('setEndDate',new Date(limitEndTime));
	}
}
/*导出  */
$("#export").click(function(){
	var href = path+"/activeReport/exportActiveReport?activeId="+id;
	$(this).attr("href",href);
});
/* 数据概览 */
function func_sumAll(){
	var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();	
	
	$.post(
			path + "/activeReport/ajaxSumAll",
			{
				"startTime":startTime,
				"endTime":endTime,
				"activeId":id
			},
			function(data){
				if(data.status == "200"){
					$(".people:eq(0)>span").text(data.data.numberVisitsNumber);
					$(".people:eq(1)>span").text(data.data.userVisitsNumber);
					$(".people:eq(2)>span").text(data.data.sharingUserNumber);
					$(".people:eq(3)>span").text(data.data.staffPartakeNumber);
					$(".people:eq(4)>span").text(data.data.integerTotalNumber);
				}
			},
			"json"
		);
}

 //显示悬浮框
var html="<p style='color:#515151'>访问次数：点击H5页面净增的次数总和，包括非员工的访问</p ><p style='color:#515151'>访问人数：点击H5页面的每日净增去重人数包括非员工</p ><p style='color:#515151'>分享用户：对H5页面进行分享，转发的净增去重人数，包括非员工的分享</p ><p style='color:#515151'>员工参与人数：对活动进行分享或点击的员工排重人数</p ><p style='color:#515151'>已发放积分数：参与该活动的员工所获得的所有积分总和</p >";
$("#activestatic").popover({
    html: true, // 为true的话，data-content里就能放html代码了		
    content:html,
    trigger:'hover',
    placement:'top',		
    placement: "right",
    delay: {hide: 100}
}).on('shown.bs.popover', function (event) {
    var that = this;
    $(this).parent().find('div.popover').on('mouseenter', function () {
        $(that).attr('in', true);
    }).on('mouseleave', function () {
        $(that).removeAttr('in');
        $(that).popover('hide');
    });
}).on('hide.bs.popover', function (event) {
    if ($(this).attr('in')) {
        event.preventDefault();
    }
});




function materialName(){
	$.post(
			path + "/activeReport/getMaterialName",
			{
				"id":id
			},
			function(data){
				if(data.status == "200"){
					var materialId = data.data.materialId
					var materialNmae = data.data.materialNmae
					var isNeedCollect = data.data.isNeedCollect
					window.location.href="<%=path%>/material/materialCount?materialId="+materialId+"&materialName="+encodeURI(encodeURI(materialNmae))+"&isNeedCollect="+isNeedCollect
				}
			},
			"json"
		);
	
}

function func_memberLine(){
	var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();	
	$.post(
			path + "/activeReport/ajaxActiveLine",
			{
				"startTime":startTime,
				"endTime":endTime,
				"activeId":id
			},
			function(data){
			if(data.status == "200"){
			var legend_data = ['访问次数','访问用户','分享用户'];
		 	var x_data = [];
		 	var y_data = [];
		 	var y1 = [];
		 	var y2 = [];
		 	var y3 = [];
		 	$.each(data.data,function(i,d){
		 		var x = d.crmDate.split("-");
		 		x = x[0]+x[1]+x[2];
		 		x_data.push(x);
		 		y1.push(d.numberVisitsNumber);
		 		y2.push(d.userVisitsNumber);
		 		y3.push(d.sharingUserNumber);
		 	});
		 	y_data.push({name:'访问次数',type:'line',smooth:true,data:y1});
		 	y_data.push({name:'访问用户',type:'line',smooth:true,data:y2});
		 	y_data.push({name:'分享用户',type:'line',smooth:true,data:y3});
		 	func_line("activeLine",legend_data,x_data,y_data);
		}
	},"json");
}

function func_line(id,legend_data,x_data,y_data){
	
    var myChart = echarts.init(document.getElementById(id));

    var option = {
   		dataZoom: [
   	        {
   	            show: true,
   	         	start: 40,
   	            end: 60
   	        }
   	    ],
		tooltip : {
   	        trigger: 'axis',
   	        axisPointer: {
   	            type: 'cross',
   	            label: {
   	                backgroundColor: '#6a7985'
   	            }
   	        }
   	    },
        legend: {
        	top:26,
            data:legend_data
        },
        yAxis: {
        	type : 'value'
        },
        xAxis: {
        	data: x_data,
        	boundaryGap : false
        },
        series: y_data
    };
    
	myChart.setOption(option);
	myChart.resize();
}
//地图控件
function chinaMap(){
	var mapChart = echarts.init($("#accessCount")[0]);
	mapChart.showLoading();
	var provinceData = new Array();
	var initChinaUrl = path+"/activeReport/findMapNum";
	var mapData;
	var startTime =$("#startDate").val();
	var endTime =$("#endDate").val();
	$.ajax({
		type:"post",
		url:initChinaUrl,
		async: false,
		data:{
			"startTime" : startTime,
	  		"endTime" : endTime,
	  		"activeId" : id
	  		/* "newMember" : searchData.newMember,
	  		"isUsed" : searchData.isUsed */
		},
    	success:function(data){
    	  if(data.status="200"){
      		mapData=data.data;
    	  }
    	}
    });
	provinceData=[
		{name: '北京',value: 0},
	    {name: '天津',value: 0},
	    {name: '上海',value: 0},
	    {name: '重庆',value: 0},
	    {name: '河北',value: 0},
	    {name: '河南',value: 0},
	    {name: '云南',value: 0},
	    {name: '辽宁',value: 0},
	    {name: '黑龙江',value:0},
	    {name: '湖南',value: 0},
	    {name: '安徽',value: 0},
	    {name: '山东',value: 0},
	    {name: '新疆',value: 0},
	    {name: '江苏',value: 0},
	    {name: '浙江',value: 0},
	    {name: '江西',value: 0},
	    {name: '湖北',value: 0},
	    {name: '广西',value: 0},
	    {name: '甘肃',value: 0},
	    {name: '山西',value: 0},
	    {name: '内蒙古',value:0},
	    {name: '陕西',value: 0},
	    {name: '吉林',value: 0},
	    {name: '福建',value: 0},
	    {name: '贵州',value: 0},
	    {name: '广东',value: 0},
	    {name: '青海',value: 0},
	    {name: '西藏',value: 0},
	    {name: '四川',value: 0},
	    {name: '宁夏',value: 0},
	    {name: '海南',value: 0},
	    {name: '台湾',value: 0},
	    {name: '香港',value: 0},
	    {name: '澳门',value: 0}
		];
	if(StringEmpty(mapData)){
		for(var i=0;i<mapData.length;i++){
			Code = mapData[i].cityCode+"000";
			for(var j=0;j<provinceData.length;j++){				
				var provinceCode = getCodeByName(provinceData[j].name);
				if(provinceCode==Code){
					//provinceData[j].value = mapData[i].materialCount;
					provinceData[j].value = mapData[i].materialCount;
				}
			}
		}
	}
	initTable();
	mapChart.hideLoading();
    var mapOption = {
        tooltip : {//提示框组件。
            trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        },
        legend: {
            orient: 'horizontal',//图例的排列方向
            x:'left',//图例的位置
            data:['访问数'],
        	show:false
        },
        visualMap: {//颜色的设置  dataRange
            x: 'left',
            y: 'bottom',
           /* splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ], */
            min: 0,
            max: provinceData[0].value,
            calculable : true,//颜色呈条状
            text:['高','低'],// 文本，默认为数值文本
            color: ['#1D84C6','#DCFBFD']
        },
        toolbox: {//工具栏
            show: true,
            orient : 'vertical',//工具栏 icon 的布局朝向
            x: 'right',
            y: 'center',
            feature : {//各工具配置项。
                mark : {show: true},
                dataView : {show: true, readOnly: false},//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                restore : {show: true},//配置项还原。
                saveAsImage : {show: true}//保存为图片。
            }
        },
        roamController: {//控制地图的上下左右放大缩小 图上没有显示
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                name: '访问人数',
                type: 'map',
                mapType: 'china',
                roam: true,//是否开启鼠标缩放和平移漫游
                itemStyle:{//地图区域的多边形 图形样式
                    normal:{//是图形在默认状态下的样式
                        label:{
                            show:true,//是否显示标签
                            textStyle: {
                                color: "#FD7D51"
                            }
                        }
                    },
                    emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label:{show:true}
                    }
                },
                top:"3%",//组件距离容器的距离
                data:provinceData
            }
        ]
    };
    mapChart.setOption(mapOption);
    mapChart.on('click', function (params) {
    	$(".mapView").html("返回全国视图")
        var dataIndex = params.name;
        var code = getCodeByName(dataIndex);
        cityCode = code.substring(0,2);
        initTable();
    }); 
}
//点击地图上方
$(".mapView").click(function(){
		cityCode=null;
		$(this).html("全国视图");
		var id=$(this).data("id");
		initTable();
});


//初始化列表
function initTable(){
	var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();	
	var initChinaUrl = path+"/activeReport/findMapNum";
	var mapData;
	$.ajax({
		type:"post",
		url:initChinaUrl,
		async: false,
		data:{
	  		"startTime" : startTime,
	  		"endTime" : endTime,
	  		"activeId" : id,
	  		"cityCode" : cityCode
		},
    	success:function(data){
    	  if(data.status="200"){
    		  mapData=data.data;
    	  }
    	}
    });
	var tableHtml="";
	if(StringEmpty(mapData)){
		for(var i=0;i<mapData.length;i++){
			if(i==10){
				break;
			}
			var tableData = mapData[i];
			var code = ""+tableData.cityCode;
			var name ="未知";
			if(StringEmpty(cityCode)){
				if(StringEmpty(getNameByCode(code))){
					name=getNameByCode(code);
				}	
			}else{
				if(StringEmpty(getNameByCode(code+"000"))){
					name=getNameByCode(code+"000");
				}
			}
			var nu = 5;
			var visitCount = tableData.materialCount;
			var shareCount = tableData.shareCount;
			var percentage = "0%";
			if (!isNaN(visitCount)&&!isNaN(shareCount)) {
				percentage=Math.round(shareCount/visitCount*10000)/100+"%";					
		    }
			tableHtml+="<tr>";
			tableHtml+="<td>"+name+"</td>";
			tableHtml+="<td>"+tableData.materialCount+"</td>";
			tableHtml+="<td>"+tableData.shareCount+"</td>";
			tableHtml+="<td>"+percentage+"</td>";
			tableHtml+="</tr>";
		}
	}
	$(".access-table").html(tableHtml);
}
/*部门排行列表  */
function dataTable() {
    return $('#departmentMyTable').DataTable({
        processing: false,
        ordering: false,
        searching: false,
        info: false,
        autoWidth: true,
        lengthChange: false,
        language: {
            emptyTable: '没有数据表',
            info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
            infoEmpty: '没有数据',
            lengthMenu: '每页显示 _MENU_ 条记录',
            loadingRecords: '正在加载数据....',
            processing: '正在处理数据....',
            zeroRecords: '没有找到匹配的记录',
            paginate: {
                first: '首页',
                previous: '前页',
                next: '后页',
                last: '尾页'
            }
        },
        order: [[1, 'desc']],
        pageLength: 10,
        pagingType: 'full_numbers',
        columnDefs: [{
            render: function (data, type, full) {
                var result = "";
//                 if(data != null){
                	result = data;
//                 }
                return result;
            },
            targets: 0
		}],
        columns: func_columnsp(),
        serverSide: false,
        ajax: {
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            url: func_AjaxUrlp(),
            data: function (d) {
                d.extra_search = func_ajaxDatap();
                return JSON.stringify(d);
            }
        }
	});
    
    function func_AjaxUrlp() {
        return path + "/activeReport/ajaxGetDepartPages";
    }

    function func_columnsp() {
        var jsonArr = [
        	{"data": "sort"},
        	{"data": "departmentName"},
        	{"data": "userVisitsNumber"},
            {"data": "sharingUserNumber"},
            {"data": "meanValue"}
        ];
        return jsonArr;
    }

    function func_ajaxDatap() {
    	var startTime=$('#startDate').val();
   		var endTime=$('#endDate').val();	
        var jsonObject = new Object();
        jsonObject.startTime = startTime;
        jsonObject.endTime = endTime;
        jsonObject.activeId = id;
        return jsonObject;
    }
    
} 

/*城市分布列表  */
function mapDataTable() {
    return $('#mapTable').DataTable({
        processing: true,
        ordering: false,
        searching: false,
        info: false,
        autoWidth: true,
        lengthChange: false,
        language: {
            emptyTable: '没有数据表',
            info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
            infoEmpty: '没有数据',
            lengthMenu: '每页显示 _MENU_ 条记录',
            loadingRecords: '正在加载数据....',
            processing: '正在处理数据....',
            zeroRecords: '没有找到匹配的记录',
            paginate: {
                first: '首页',
                previous: '前页',
                next: '后页',
                last: '尾页'
            }
        },
        order: [[1, 'desc']],
        pageLength: 10,
        pagingType: 'full_numbers',
        columnDefs: [{
            render: function (data, type, full) {
                var result = "";
                 if(data != null){
                	result = data;
                 }
                return result;
            },
            targets: 0
		}],
        columns: func_columnsm(),
        serverSide: true,
        ajax: {
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            url: func_AjaxUrlm(),
            data: function (d) {
                d.extra_search = func_ajaxDatam();
                return JSON.stringify(d);
            }
        }
	});
    
    function func_AjaxUrlm() {
       // return path + "/activeReport/ajaxGetMapPages";
    }

    function func_columnsm() {
        var jsonArr = [
        	{"data": ""},
        	{"data": "userVisitsNumber"},
            {"data": "sharingUserNumber"},
            {"data": "staffPartakeNumber"}
        ];
        return jsonArr;
    }

    function func_ajaxDatam() {
    	var startTime=$('#startDate').val();
   	 var endTime=$('#endDate').val();	
        var jsonObject = new Object();
        jsonObject.startTime = startTime;
        jsonObject.endTime = endTime;
        jsonObject.activeId = id;
        return jsonObject;
    }
    
} 

/*活动统计列表列表  */
function activeDataTable() {
    return $('#avtiveTable').DataTable({
        processing: true,
        ordering: false,
        searching: false,
        info: true,
        autoWidth: true,
        lengthChange: false,
        language: {
            emptyTable: '没有数据表',
            info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
            infoEmpty: '没有数据',
            lengthMenu: '每页显示 _MENU_ 条记录',
            loadingRecords: '正在加载数据....',
            processing: '正在处理数据....',
            zeroRecords: '没有找到匹配的记录',
            paginate: {
                first: '首页',
                previous: '前页',
                next: '后页',
                last: '尾页'
            }
        },
        order: [[1, 'desc']],
        pageLength: 10,
        pagingType: 'full_numbers',
        columnDefs: [{
            render: function (data, type, full) {
                var result = "";
//                 if(data != null){
                	result = data;
//                 }
                return result;
            },
            targets: 0
		}],
        columns: func_columnsa(),
        serverSide: true,
        ajax: {
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            url: func_AjaxUrla(),
            data: function (d) {
                d.extra_search = func_ajaxDataa();
                return JSON.stringify(d);
            }
        }
	});
    
    function func_AjaxUrla() {
        return path + "/activeReport/ajaxGetActivePages";
    }

    function func_columnsa() {
        var jsonArr = [
        	{"data": "crmDate"},
        	{"data": "numberVisitsNumber"},
        	{"data": "userVisitsNumber"},
            {"data": "sharingUserNumber"},
            {"data": "activeLv"}
        ];
        return jsonArr;
    }

    function func_ajaxDataa() {
    	var startTime=$('#startDate').val();
   	 var endTime=$('#endDate').val();	
        var jsonObject = new Object();
        jsonObject.startTime = startTime;
        jsonObject.endTime = endTime;
        jsonObject.activeId = id;
        return jsonObject;
    }
    
} 
</script>
</html>